<template>
	<view>
		<view class="">
			<scroll-view class="list" scroll-y @scrolltolower="loadMore">
				<view class="zcModel-box zcFlex_column">
					<block v-for="(item,index) in dataTest" :key="index">
						<myCustomerPublish :isSalesManRead="item.isSalesManRead" :item='item' @doMyCustomerInfo="doMyCustomerInfo" :index="index"></myCustomerPublish>
					</block>
				</view>
			</scroll-view>
			
			<view class="uni-tab-bar-loading">
				{{loadingText}}
			</view>
			<view v-if="dataTest.length < 1 && isNoDataShow" class="uni-tab-bar-loading" style="text-align: center;">
				<view class="no_model">
					<image :src="imgPath+'UniImages/no_data.png'" mode="widthFix" style="width: 100%;"></image>
					<view class="no_text">暂无数据</view>
				</view>
			</view>
			
			<view class="zcFooter-but uni-flex">
				<button class="iconfont icon-zhengque" @tap="zcSetOrganNotice4ListView">全部已读</button>
			</view>
		</view>
		
		
		<view class="zcPopupBox" :style="{'height':isInfoShow?'100%':'0','opacity':isInfoShow?'1':'0'}">
			<view class="popup_mask" @tap="doMyCustomerInfoHide" ></view>
			<view class="popup_content" :style="{'top':isInfoShow?'60rpx':'-1000rpx'}" >
				<view class="popup_item uni-flex zcAlignI_center">
					<view class="uni-flex-item">
						<view class="">{{title}}</view>
						<view class="">{{date}}</view>
					</view>
					<view class="">{{count}}人已读</view>
				</view>
				<view class="popup_item">
					{{content}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myCustomerPublish from '../../components/my-customer-publish/my-customer-publish.vue'
	let _this;
	
	export default {
		components:{
			myCustomerPublish
		},
		data() {
			return {
				imgPath:this.$ZcPublic.Domain,
				isNoDataShow:false,
				isInfoShow:false,
				title:'',
				count:0,
				content:'',
				date:'',
				StartRow:0,	//	当前页数据开始下标
				dataLength:0,	//	当前页 数据返回个数
				loadingText:'',
				dataTest:[
					// {CustomerName:'张三',CustomerTelephone:'1333333333',VehiclePlateNo:'789',VehicleMaker:'',InsureEndDate:'2019-10-25',SN:'',isSalesManRead:false}
				]
			}
		},
		onLoad() {
			_this = this;
		},
		onShow() {
			_this.zcQueryNonStopOrganNoticeList();
		},
		methods: {
			loadMore() {
				if (_this.dataLength < 20) {
					return;
				}
				_this.loadingText = '加载中';
				_this.zcQueryNonStopOrganNoticeList();
			},
			doMyCustomerInfo(res) {
				console.log('公告回调 = ',res);
				_this.isInfoShow = !_this.isInfoShow;
				_this.title = res.CustomerName;
				_this.content = res.VehiclePlateNo;
				_this.date = res.InsureEndDate;
				_this.count = res.ReaderCount;
				if (!res.isSalesManRead) {
					_this.dataTest[res.index].isSalesManRead = true;
				}
				
				_this.zcGetOrganNotice4View(res.SN);
			},
			doMyCustomerInfoHide() {
				_this.isInfoShow = !_this.isInfoShow;
			},
			//	公告列表
			zcQueryNonStopOrganNoticeList() {
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_QueryNonStopOrganNoticeList',
						Data: {
							SalesManAll:1,
							StartRow:_this.StartRow,
							count:20,
						}
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							console.log('公告列表 = ',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							
							if (resjson.data !== null && resjson.data.length > 0) {
								_this.StartRow = _this.StartRow + resjson.data.length;	// 初始化 下次加载开始下标
								_this.dataLength = resjson.data.length;
								if (_this.dataLength < 20) {
									if (_this.StartRow >= 20) {
										_this.loadingText = '没有更多了...';
									}else{
										_this.loadingText = '';
									}
								}else {
									_this.loadingText = '加载更多...';
								}
								
								for (let i = 0; i < resjson.data.length; i++) {
									let item = {
										CustomerName:resjson.data[i].Title,
										CustomerTelephone:'',
										VehiclePlateNo:resjson.data[i].Content,
										ReaderCount:resjson.data[i].ReaderCount,
										InsureEndDate:resjson.data[i].PublishDate,
										SN:resjson.data[i].SN,
										isSalesManRead:resjson.data[i].isSalesManRead
									}
									
									_this.dataTest.push(item);
								}
							}else {
								_this.isNoDataShow = true;
							}
						}else{
							
						}
						
					},
					Scope: this
				})
			},
			zcGetOrganNotice4View(SN) {
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_GetOrganNotice4View',
						Data: {
							SN:SN
						}
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							console.log('查看公告 = ',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
						}else{
							
						}
						
					},
					Scope: this
				})
			},
			//	批量标记公告已读
			zcSetOrganNotice4ListView() {
				let snlist = [];
				for (let i = 0; i < _this.dataTest.length; i++) {
					if (!_this.dataTest[i].isSalesManRead) {
						snlist.push(_this.dataTest[i].SN);
						_this.dataTest[i].isSalesManRead = true;
					}
				}
				console.log('未读消息 = ',snlist);
				if (snlist.length===0) {
					uni.showToast({
						title: '已全部阅读！',
						icon:'none',
						mask:true
					});
					return;
				}
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_SetOrganNotice4ListView',
						Data: {
							snlist:snlist
						}
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							console.log('批量查看公告 = ',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							uni.showToast({
								title: '已全部阅读！',
								icon:'none',
								mask:true
							});
						} else{
							
						}
					},
					Scope: this
				})
			}
			
			
			
		}
	}
</script>

<style>
	.zcModel-box{display: flex;margin: 20upx;}
	.zcModel-box-view{flex-shrink: 0;flex: 1;padding: 20upx;box-sizing: border-box;margin-bottom: 20upx;background-color: #FFFFFF;}
	.zcModel-image{width: 16%;border-radius: 100%;overflow: hidden;margin-right: 20upx;}
	.zcModel-image>image{width: 100%;display: block;}
	.zcModel-item{display: flex;flex: 1;}
	.zcModel-item-title{font-size: 32upx;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;font-weight: bold;}
	.zcModel-item-content{overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;line-height: 1.2;margin: 10upx 0;font-size: 28upx!important;}
	.zcModel-item-text{color: #999999;font-size: 28upx!important;}
	.icon-zhiding:after{
		content: "\e6c7";
		color: #fb3c3c;
		margin-left: 20upx;
	}
	.unreadMessage_active{color: #26a6ff!important;}
	/* 弹出层 样式 */
	.zcPopupBox{position: fixed;top:0;width: 100%;left: 0;z-index: 10;color: #FFFFFF;box-sizing: border-box;height: 0;opacity: 0;transition: opacity 0.5s; }
	.popup_mask{background-color: rgba(0,0,0,0.2);position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
	.zcPopupBox-model{background-color: #FFFFFF;border-radius: 12upx;padding: 0 40upx;}
	/* .zcPopupBox-content{padding: 20upx;} */
	.popup_content .active{font-size: 28upx!important;}
	.popup_content_show{top:60upx!important;transition: 1s;}
	.popup_content{flex-direction: row;background-color: #FFFFFF;width: 90%;margin: auto;position: relative;z-index: 100;top:-1000upx;border-radius: 20upx;transition: top 0.5s;}
	.popup_item{box-sizing: border-box;color: #333333;margin: 0 40upx;padding: 20upx 0; }
	@keyframes slide_into{
		from{top:-100%}
		to{top:4%}
	}
	@keyframes slide_out{
		from{top:4%}
		to{top:-100%}
	}
	.popup_item:first-child{border-bottom: 2upx solid #E5E5E5;padding: 20upx;}
	.popup_item:last-child{padding: 40upx 35upx 100upx 35upx;}
	.popup_item>view:first-child>view:first-child{font-size: 32upx;}
	.popup_item>view:last-child{font-size: 22upx;}
	
	
	/* 底部按钮样式 -- 区域 */
	.zcFooter-but{position: fixed;bottom: 0;left: 0;width: 100%;background-color: rgba(255, 255, 255, 1);border-top: 1px solid rgba(0, 0, 0, 0.1);}
	/* .zcFooter-but button:first-child{flex: 1;border: 2upx solid #3CA4FA;color: #3CA4FA;border-radius: 0;} */
	.zcFooter-but button{color: #666666;background-color: rgba(255, 255, 255, 1);flex: 1;}
	.zcFooter-but button:after{border: none;}
	.zcFooter-but .button-hover{opacity: 0.6;}
	
	.icon-zhengque:before{
		content: "\e627";
		font-size: 36upx;
		color: #666666;
		margin-right: 20upx;
	}
	
	/* 分页底部说明样式 */
	.uni-tab-bar-loading{text-align: center;margin: 0;}
	
	/* 无数据样式 */
	.no_model{position: relative;display: flex;flex-direction: column;align-items: center;padding: 0 160upx;padding-top: 100upx;}
	.no_text{font-size: 30upx;color: #999999;position: absolute;bottom: 28upx;}
</style>
